import React, { memo, useEffect } from "react";
import Scroll from '../../baseUI/scroll';
import { connect } from "react-redux";
import * as Action from './store/actionCreators'
import { TrycarStyle } from './trycar.style'
import RotationChart from '@/components/main/rotationChart2/RotationChart.jsx'


const TryCar = (props) => {
    console.log(props);
    // 解构状态
    const { trycarData } = props;
    // console.log(trycarData, "------------");
    const { rotationImg = [], longPic = [] } = trycarData;
    console.log(rotationImg);
    console.log(longPic, "--------------");
    // 解构方法
    const { getTrycarDataDispatch } = props;

    useEffect(() => {
        // console.log("进入了useffect")
        if (!trycarData.length) {
            getTrycarDataDispatch()
        }
    }, [])
    return (
        <TrycarStyle >
            <Scroll
                direction={'vertical'}
                refresh={false}
            >
                <div className="trycarContainer">
                    <div className="information">
                        <div className="card">
                            <div className="card_body">
                                <div className="title">预约试驾</div>
                                <div className="informations">
                                    <div className="flex_box">
                                        <div className="cartype">
                                            <div className="cartype_top">预约车险</div>
                                            <div className="cartype_bottom">
                                                <div className="word">小鹏P7</div>
                                                <svg t="1643108171576" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1935" width="200" height="200"><path d="M960 576v-2q-0.06-1-0.15-2v-0.27c-0.06-0.56-0.13-1.13-0.21-1.7l-0.06-0.35c-0.09-0.54-0.18-1.07-0.29-1.61 0-0.11-0.05-0.22-0.07-0.34-0.12-0.53-0.24-1.07-0.37-1.6 0-0.09 0-0.18-0.08-0.28-0.14-0.55-0.3-1.09-0.46-1.64l-0.06-0.17c-0.18-0.58-0.37-1.15-0.58-1.72a39.6 39.6 0 0 0-6.69-11.65v-0.06c-0.39-0.47-0.78-0.93-1.19-1.38-0.22-0.24-0.45-0.47-0.67-0.7s-0.42-0.45-0.64-0.67L668.14 267.57a39.88 39.88 0 0 0-56.39 0l-0.18 0.18a39.88 39.88 0 0 0 0 56.39L823.43 536H104a40 40 0 0 0 0 80h817.87A40 40 0 0 0 960 577.89v-1.12-0.77z" fill="#999999" p-id="1936"></path></svg>
                                            </div>
                                        </div>
                                        <div className="city">
                                            <div className="city_top">试驾城市</div>
                                            <div className="city_bottom">
                                                <div className="word">江西/南昌市</div>
                                                <svg t="1643108171576" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1935" width="200" height="200"><path d="M960 576v-2q-0.06-1-0.15-2v-0.27c-0.06-0.56-0.13-1.13-0.21-1.7l-0.06-0.35c-0.09-0.54-0.18-1.07-0.29-1.61 0-0.11-0.05-0.22-0.07-0.34-0.12-0.53-0.24-1.07-0.37-1.6 0-0.09 0-0.18-0.08-0.28-0.14-0.55-0.3-1.09-0.46-1.64l-0.06-0.17c-0.18-0.58-0.37-1.15-0.58-1.72a39.6 39.6 0 0 0-6.69-11.65v-0.06c-0.39-0.47-0.78-0.93-1.19-1.38-0.22-0.24-0.45-0.47-0.67-0.7s-0.42-0.45-0.64-0.67L668.14 267.57a39.88 39.88 0 0 0-56.39 0l-0.18 0.18a39.88 39.88 0 0 0 0 56.39L823.43 536H104a40 40 0 0 0 0 80h817.87A40 40 0 0 0 960 577.89v-1.12-0.77z" fill="#999999" p-id="1936"></path></svg>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="shop">
                                        <div className="shop_top">销售门店</div>
                                        <div className="shop_bottom">
                                            <div className="word">南昌王府井体验中心</div>
                                            <svg t="1643108171576" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1935" width="200" height="200"><path d="M960 576v-2q-0.06-1-0.15-2v-0.27c-0.06-0.56-0.13-1.13-0.21-1.7l-0.06-0.35c-0.09-0.54-0.18-1.07-0.29-1.61 0-0.11-0.05-0.22-0.07-0.34-0.12-0.53-0.24-1.07-0.37-1.6 0-0.09 0-0.18-0.08-0.28-0.14-0.55-0.3-1.09-0.46-1.64l-0.06-0.17c-0.18-0.58-0.37-1.15-0.58-1.72a39.6 39.6 0 0 0-6.69-11.65v-0.06c-0.39-0.47-0.78-0.93-1.19-1.38-0.22-0.24-0.45-0.47-0.67-0.7s-0.42-0.45-0.64-0.67L668.14 267.57a39.88 39.88 0 0 0-56.39 0l-0.18 0.18a39.88 39.88 0 0 0 0 56.39L823.43 536H104a40 40 0 0 0 0 80h817.87A40 40 0 0 0 960 577.89v-1.12-0.77z" fill="#999999" p-id="1936"></path></svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="card_bottom">
                                <div className="topbutton"><div className="word">一键预约</div></div>
                                <div className="bottombutton"><div className="word">了解更多</div></div>
                            </div>
                        </div>
                    </div>
                    <RotationChart rotationImg={rotationImg} />
                    {
                        longPic.map(item => {
                            return (
                                <div className="piccontainer" key={item.id}>
                                    <img src={item.picUrl} alt="" />
                                </div>
                            )
                        })
                    }
                </div>
            </Scroll>
        </TrycarStyle>
    )
}

const mapStateToPorps = (state) => {
    return {
        trycarData: state.trycar.trycarstore
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getTrycarDataDispatch() {
            dispatch(Action.getTrycarData())
            // console.log(Action.InsertTrycarData, "---------------");
        }
        // getMainDataDispatch: actionTypes.getHomeData
    }
}

export default connect(mapStateToPorps, mapDispatchToProps)(memo(TryCar))
